<script setup>
import { ref, onMounted, onUnmounted, defineProps } from 'vue'
import * as echarts from 'echarts';
const props = defineProps({
    title: {
        type: String,
        default: '标题'
    },
    scaleX: {
        type: Number,
        default: 1
    }
})


// 使用 ref 获取 DOM 元素引用，用于挂载 ECharts 实例
const chartRef = ref(null);

// 组件挂载完成后执行
onMounted(() => {
    // 安全检查：确保 ref 已正确绑定到 DOM 元素
    if (!chartRef.value) return;

    // 初始化 ECharts 实例，绑定到指定的 DOM 元素
    const myChart = echarts.init(chartRef.value);

    // ECharts 配置项
    const data = [220, 182, 191, 234, 290, 330]
    const sideData = data.map(item => item + 4.5)

    const option = {

        // backgroundColor: "#041730",
        tooltip: {
            trigger: 'axis',
            formatter: "{b} : {c}",
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        xAxis: {
            data: ['2016年', '2017年', '2018年', '2019年', '2021年', '2022年'],
            //坐标轴
            axisLine: {
                lineStyle: {
                    color: '#3eb2e8'
                }
            },
            //坐标值标注
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff',
                }
            }
        },
        yAxis: {
            //坐标轴
            axisLine: {
                show: false
            },
            //坐标值标注
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff',
                }
            },
            //分格线
            splitLine: {
                lineStyle: {
                    color: '#4784e8'
                }
            }
        },
        series: [
            {
                name: '注册总量',
                type: 'line',
                smooth: true, //是否平滑曲线显示
                // symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
                showAllSymbol: true,
                symbol: 'emptyCircle',
                symbolSize: 6,
                lineStyle: {
                    normal: {
                        color: "#fbf158", // 线条颜色
                    },
                    borderColor: '#f0f'
                },
                label: {
                    show: true,
                    position: 'top',
                    textStyle: {
                        color: '#fff',
                    }
                },
                itemStyle: {
                    normal: {
                        color: "#fbf158",

                    }
                },
                tooltip: {
                    show: false
                },
                areaStyle: { //区域填充样式
                    normal: {
                        //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(255,252,80,1)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(0,0,0, 0)'
                        }
                        ], false),
                        shadowColor: 'rgba(53,142,215, 0.9)', //阴影颜色
                        shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                    }
                },
                data: [220, 182, 230, 191, 290, 234]
            },

            {
                name: 'a',
                tooltip: {
                    show: false
                },
                type: 'bar',
                barWidth: 24.5,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                            offset: 0,
                            color: "#0B4EC3" // 0% 处的颜色
                        }, {
                            offset: 0.6,
                            color: "#138CEB" // 60% 处的颜色
                        }, {
                            offset: 1,
                            color: "#17AAFE" // 100% 处的颜色
                        }], false)
                    }
                },
                data: data,
                barGap: 0
            }, {
                type: 'bar',
                barWidth: 8,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                            offset: 0,
                            color: "#09337C" // 0% 处的颜色
                        }, {
                            offset: 0.6,
                            color: "#0761C0" // 60% 处的颜色
                        }, {
                            offset: 1,
                            color: "#0575DE" // 100% 处的颜色
                        }], false)
                    }
                },
                barGap: 0,
                data: sideData
            }, {
                name: 'b',
                tooltip: {
                    show: false
                },
                type: 'pictorialBar',
                itemStyle: {
                    borderWidth: 1,
                    borderColor: '#0571D5',
                    color: '#1779E0'
                },
                symbol: 'path://M 0,0 l 120,0 l -30,60 l -120,0 z',
                symbolSize: ['30', '12'],
                symbolOffset: ['0', '-11'],
                //symbolRotate: -5,
                symbolPosition: 'end',
                data: data,
                z: 3
            }]
    };

    // 应用配置项到 ECharts 实例
    myChart.setOption(option);

    // 响应式调整：窗口大小变化时重新调整图表大小
    const resizeHandler = () => myChart.resize();
    window.addEventListener('resize', resizeHandler);

    // 可选：在组件卸载时移除事件监听器和销毁图表
    onUnmounted(() => {
        window.removeEventListener('resize', resizeHandler);
        myChart.dispose();
    });
});
</script>
<template>
    <div class="left1">
        <div class="left-top"
            :style="{ transform: scaleX === -1 ? 'scaleX(-1)' : 'none', paddingLeft: scaleX === -1 ? '35%' : '35%', }">
            <div
                :style="{ transform: scaleX === -1 ? 'scaleX(-1)' : 'none', textAlign: scaleX === -1 ? 'right' : 'left' }">
                {{ title }}</div>
        </div>
        <div class="left-bottom">
            <!-- 这是图表部分 -->
            <div ref="chartRef" style="width: 100%; height: 100%"></div>
        </div>
    </div>
</template>
<style scoped>
.left1 {
    width: 100%;
    height: 100%;
    /* background-color: #000000; */
    display: flex;
    flex-direction: column;
}

.left-top {
    height: 25%;
    background: url('/homePageImg/tl.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: 100% 100%;
    padding: 0 0 4% 0;
    font-size: 5px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 0% !important;
}

.left-bottom {
    flex: 1;
    /* background-color: #f1f3f5; */
}

.chartRef {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    /* 建议添加最小高度确保显示 */
    /* min-height: 400px; */
}
</style>